<template>
  <a-menu v-model:selectedKeys="selectedKeys" :openKeys="openKeysView" theme="dark" mode="inline" >
    <Menu />
  </a-menu>
</template>

<script setup>
import { defineProps, computed, watch, } from 'vue'
import { useStore } from 'vuex'
import Menu from './Menu.js'

const store = useStore()

const props = defineProps({
  collapsed:Boolean
})

// 制作导航菜单与tabs联动，openKeysView用于解决组件不刷新的bug
let openKeys = computed(() => store.getters['menu/openKeys'])
let selectedKeys = computed(() => store.getters['menu/selectedKeys'])
let openKeysView = openKeys.value

watch(() => openKeys.value, (_val) => {
  if(props.collapsed){
    openKeysView = []
  }else{
    openKeysView = _val
  }
});
watch(() => props.collapsed, (status)=>{
  if(!status){
    openKeysView = openKeys.value
  }
})
</script>